import React, { useState } from "react";
import { useAuth } from "../context/AuthProvider";
import { login } from "../api/user";
import { message, Button, Form, Input } from "antd";
import loginBackGround from '../image/login.jpg'

const Login = () => {
  const { setUser } = useAuth();
  const [loading, setLoading] = useState(false);

  const onFinish = (values) => {
    setLoading(true);
    // message.success('登录成功')
    // setUser(values)
    login(values)
      .then((res) => {
        console.log(res);
        if (res.status === "ok") {
          message.success("登录成功");
          setUser(res.userdata);
        }

        if (res.status == "false") {
          message.error("登录失败，" + res.message);
        }
      })
      .finally(() => {
        setLoading(false);
      });
  };
  return (
    <div style={{
      width: "100%",
      height: "100vh",
      display: "flex",
      alignItems: "center",
      backgroundImage: `url(${require('../image/login.jpg')})`,
      backgroundRepeat: "no-repeat"
    }} >
      <div
        style={{
          width: "60%",
        }}
      >
      </div>
      <div
        style={{
          width: "30%",
          // backgroundColor: "#ccc"
          height: '50%',

        }}
      >
        <div
          style={{
            fontSize: "20px",
            fontWeight: "bold",
            margin: "auto",
            width: "160px",
          }}
        >
          <span> 选课系统用户登录</span>
        </div>

        <Form
          name="basic"
          layout="vertical"
          style={{ width: "60%", margin: "30px auto" }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入账号",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            hasFeedback
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button
              block
              shape="round"
              type="primary"
              htmlType="submit"
              loading={loading}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>  </div >
  );
};

export default Login;
